<template>
  <div class="manage-batch">
    <el-form
      ref="searchForm"
      :model="searchForm"
      label-width="80px"
      style="width: 100%"
      :inline="true"
    >
      <el-form-item label="选择时间:">
        <el-select v-model="searchForm.timeType" @change="changeTimeType()">
          <el-option label="最近一小时" value="hour"></el-option>
          <el-option label="最近一天" value="day"></el-option>
          <el-option label="最近一周" value="week"></el-option>
          <el-option label="最近一个月" value="month"></el-option>
          <el-option label="指定日期" value="point"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起止日期:" v-show="searchForm.timeType == 'point'">
        <el-date-picker
          @change="changeStartEnd()"
          v-model="timeArr"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-button @click="refreshData" type="primary" icon="el-icon-search">查询</el-button>
    </el-form>
    <div class="history">
      <batch-history ref="history" :startTime="startTime" :endTime="endTime" :type="'0'" />
    </div>
    <div class="vcore">
      <batch-vcore ref="vcore" :startTime="startTime" :endTime="endTime" :type="'0'" />
    </div>
    <div class="task">
      <batch-task ref="task" :startTime="startTime" :endTime="endTime" />
    </div>
    <div class="workflow">
      <batch-workflow ref="workflow" :startTime="startTime" :endTime="endTime" />
    </div>
  </div>
</template>
<script>
import batchHistory from "./batch-history";
import batchVcore from "./batch-vcore";
import batchTask from "./batch-task";
import batchWorkflow from "./batch-workflow";
export default {
  name: "manageBatch",
  components: {
    batchHistory,
    batchVcore,
    batchTask,
    batchWorkflow
  },
  data() {
    return {
      searchForm: {
        timeType: "day"
      },
      startTime: "",
      endTime: "",
      timeArr: null
    };
  },
  computed: {},
  methods: {
    changeTimeType() {
      var now = new Date().getTime();
      this.endTime = now;
      switch (this.searchForm.timeType) {
        case "hour":
          this.startTime = now - 1 * 60 * 60 * 1000;
          break;
        case "day":
          this.startTime = now - 24 * 60 * 60 * 1000;
          break;
        case "week":
          this.startTime = now - 7 * 24 * 60 * 60 * 1000;
          break;
        case "month":
          this.startTime = now - 30 * 24 * 60 * 60 * 1000;
          break;
        case "point":
          this.timeArr = null;
          this.startTime = "";
          this.endTime = "";
          break;
        default:
          break;
      }
    },
    changeStartEnd() {
      if (this.timeArr) {
        this.startTime = new Date(this.timeArr[0]).getTime();
        this.endTime = new Date(this.timeArr[1]).getTime();
      } else {
        this.startTime = "";
        this.endTime = "";
      }
    },
    refreshData() {
      if (this.searchForm.timeType == "point" && this.timeArr == null)
        return this.$message({
          message: "请选择指定日期",
          type: "error"
        });
      if (this.searchForm.timeType != "point") this.changeTimeType();
      if (this.$refs.history) this.$refs.history.initData();
      if (this.$refs.task) this.$refs.task.initData();
      if (this.$refs.workflow) this.$refs.workflow.initData();
      if (this.$refs.vcore) this.$refs.vcore.initData();
    }
  },
  created() {
    this.changeTimeType();
  }
};
</script>
<style lang="scss" scoped>
.manage-batch {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .history,
  .vcore,
  .task,
  .workflow {
    width: 49%;
    height: 360px;
    box-sizing: border-box;
    padding: 0 10px;
    padding-top: 20px;
    border: 1px solid #e4e7ed;
    margin-bottom: 20px;
  }
}
</style>
